<template>
  <div>
    <el-row>
      <el-col :span="15">
        <dl class="select-bar">
          <dt>筛选:</dt>
          <template v-for="item of typeList">
            <dd
              :class="{ current: item.data == data }"
              @click="handleClick(item.data)"
              :key="item.name"
            >{{ item.name }}</dd>
          </template>
        </dl>
      </el-col>
      <el-col :span="9" v-if="isSearch">
        <el-input :placeholder="searchPlaceHolder" v-model="search" @keypress.enter.native="handleSearch">
            <el-button slot="append" icon="el-icon-search" @click="handleSearch"></el-button>
        </el-input>
      </el-col>
      <el-col :span="9" v-if="isDate">
        <el-date-picker
          v-model="date"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          @change="handleDateChange(data)"
          :picker-options="pickerOptions2"
          >
        </el-date-picker>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    name: 'ListSearchBar',
    props: {
      typeList: Array,
      typeData: String,
      dateData: Array,
      isSearch: Boolean,
      isDate: Boolean,
      searchData: String,
      searchPlaceHolder: String
    },
    data() {
      return {
        data: this.typeData || this.typeList[0].data,
        search: this.searchData,
        date: this.dateData,
        pickerOptions2: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }],
        }
      }
    },
    methods: {
      handleClick(val) {
        this.data = val
        this.$emit('fil',{type:'fil', filter:this.data})
      },
      handleSearch() {
        this.$emit('fil',{type: 'search', search: this.search})
      },
      handleDateChange() {
        this.$emit('fil',{type: 'date', date: this.date})
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import '@/assets/css/base.scss';
  .select-bar {
    margin: 0;
    padding: 0 20px;
    height:40px;
    line-height: 40px;
    dt, dd {
      display: inline-block;
      margin: 0 14px 0 0;
    }
    dd {
      cursor: pointer;
      color: #888;
    }
    dd:hover {
      text-decoration: underline;
    }
    .current {
      color: $colorTheme
    }
  }
  
</style>
